import React from 'react';
import { DatePicker, Form, Switch, Modal, Radio, Select, Spin } from 'antd';
import moment from 'moment';

const FormItem = Form.Item;

@Form.create()
class ConditionForm extends React.Component {
  static defaultProps = {
    modalVisible: false,
    handleOpt: () => {},
    handleModalVisible: () => {},
  };

  constructor(props) {
    super(props);

    this.formLayout = {
      labelCol: { span: 5 },
      wrapperCol: { span: 12 },
    };
  }

  componentDidMount() {
    const { initParams = {} } = this.props;
    const lv1ClassifyType = initParams.lv1ClassifyType ? initParams.lv1ClassifyType : 1;
    this.setForecastDate(lv1ClassifyType);
  }

  onLv1ClassifyTypeChange = e => {
    this.setForecastDate(e.target.value);
  };

  setForecastDate(lv1ClassifyType) {
    const delta = lv1ClassifyType === 1 ? 1 : 2;
    const { form } = this.props;
    form.setFieldsValue({ forecastDate: moment().add(delta, 'days') });
  }

  okHandle = () => {
    const { form, confirmHandler } = this.props;
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      const { forecastDate } = fieldsValue;
      confirmHandler({
        ...fieldsValue,
        forecastDate: forecastDate.format('YYYY-MM-DD'),
      });
    });
  };

  renderStatusItem = (form, statusObjList) => {
    if (statusObjList.length === 0) {
      return null;
    }
    return (
      <FormItem key="statusObjList" {...this.formLayout} label="进度">
        {form.getFieldDecorator('status', {
          rules: [{ required: true, message: '请指定进度' }],
        })(
          <Select placeholder="选择进度" style={{ width: '100%' }}>
            {statusObjList.map(item => (
              <Select.Option value={item.id} key={item.id}>
                {item.name}
              </Select.Option>
            ))}
          </Select>
        )}
      </FormItem>
    );
  };

  renderForceItem = (form, statusObjList) => {
    if (statusObjList.length > 0) {
      return null;
    }
    return (
      <FormItem key="forceItem" {...this.formLayout} label="强制发送">
        {form.getFieldDecorator('forced', {})(
          <Switch checkedChildren="是" unCheckedChildren="否" />
        )}
      </FormItem>
    );
  };

  render() {
    const {
      loading,
      modalVisible,
      cancelHandler,
      form,
      title,
      initParams,
      warehouseList,
      cityList,
      statusObjList = [],
    } = this.props;

    const lv1ClassifyType = initParams.lv1ClassifyType ? initParams.lv1ClassifyType : 1;
    return (
      <Modal
        destroyOnClose
        maskClosable={false}
        width={600}
        style={{ top: 20 }}
        bodyStyle={{ padding: '10px 40px' }}
        title={title}
        visible={modalVisible}
        onCancel={cancelHandler}
        onOk={this.okHandle}
        confirmLoading={loading}
      >
        <Spin spinning={loading} tip="发送数据中">
          <FormItem key="forecastDate" {...this.formLayout} label="预测日期">
            {form.getFieldDecorator('forecastDate', {})(
              <DatePicker placeholder="请选择预测日期" disabled />
            )}
          </FormItem>
          <FormItem {...this.formLayout} key="lv1ClassifyType" label="一级类目">
            {form.getFieldDecorator('lv1ClassifyType', {
              initialValue: lv1ClassifyType,
            })(
              <Radio.Group onChange={this.onLv1ClassifyTypeChange}>
                <Radio.Button value={1}>水果</Radio.Button>
                <Radio.Button value={2}>蔬菜</Radio.Button>
              </Radio.Group>
            )}
          </FormItem>
          <FormItem key="cityId" {...this.formLayout} label="城市">
            {form.getFieldDecorator('cityIdList', {
              initialValue: initParams.cityIdList,
            })(
              <Select
                placeholder="选择城市(支持多选)"
                allowClear
                mode="multiple"
                style={{ width: '100%' }}
              >
                {cityList.map(item => (
                  <Select.Option value={item.id} key={item.id}>
                    {item.name}
                  </Select.Option>
                ))}
              </Select>
            )}
          </FormItem>
          <FormItem key="warehouse" label="仓库" {...this.formLayout}>
            {form.getFieldDecorator('warehouseIdList', {
              initialValue: initParams.warehouseIdList,
            })(
              <Select
                placeholder="选择仓库(支持多选)"
                allowClear
                mode="multiple"
                style={{ width: '100%' }}
              >
                {warehouseList.map(item => (
                  <Select.Option value={item.id} key={item.id}>
                    {item.name}
                  </Select.Option>
                ))}
              </Select>
            )}
          </FormItem>
          {this.renderStatusItem(form, statusObjList)}
          {this.renderForceItem(form, statusObjList)}
        </Spin>
      </Modal>
    );
  }
}

export default ConditionForm;
